<script setup>
import { onMounted, ref } from 'vue'
import {
  deleteSysRole,
  GetSysRoleListByPage,
  SaveSysRole,
  updateSysRole
} from '@/api/sysRole'
import { ElMessage } from 'element-plus'
import { cloneDeep } from 'lodash-es'
// 分页记录的条数
let total = ref(0)
// 定义表格数据模型
let list = ref([])

const querDto = ref({ roleName: '' })
const pageParamsForm = {
  page: 1, // 页码
  limit: 10 // 每页记录数
}
const pageParams = ref(pageParamsForm) // 将pageParamsForm包装成支持响应式的对象

const fetchData = async () => {
  const pageData = await GetSysRoleListByPage(
    pageParams.value.page,
    pageParams.value.limit,
    querDto.value
  )
  list.value = pageData.data.records
  total.value = pageData.data.total
}

onMounted(() => {
  fetchData()
})

const searchSysRole = () => {
  fetchData()
}

// 控制对话是否展示的变量
const dialogVisible = ref(false)

//进入添加
const addShow = () => {
  dialogVisible.value = true
}

//表单数据模型
const defaultForm = {
  id: '',
  roleCode: '',
  roleName: ''
}
const sysRole = ref({ ...defaultForm }) // 使用ref包裹该对象，使用reactive不方便进行重置

// 重置函数
const resetForm = () => {
  sysRole.value = { ...defaultForm }
}

const editShow = async (row) => {
  sysRole.value = cloneDeep(row) // 深拷贝当前行数据
  dialogVisible.value = true
}
const submit = async () => {
  //共用一个弹窗时，增加判断，有id为空代表新增，id有值代表编辑
  console.log('sysRole' + sysRole.value.id)
  if (
    sysRole.value.id !== null &&
    sysRole.value.id !== undefined &&
    sysRole.value.id !== ''
  ) {
    //编辑
    const { code } = await updateSysRole(sysRole.value)
    if (code === 200) {
      dialogVisible.value = false
      ElMessage.success('操作成功')
      fetchData()
      resetForm()
    }
  } else {
    const { code } = await SaveSysRole(sysRole.value)
    if (code === 200) {
      dialogVisible.value = false
      ElMessage.success('操作成功')
      fetchData()
      resetForm()
    }
  }
}

const deleteShow = async (row) => {
  sysRole.value = row
  const { code } = await deleteSysRole(sysRole.value)
  if (code === 200) {
    ElMessage.success('操作成功')
    fetchData()
    resetForm()
  }
}
</script>

<template>
  <div class="search-div">
    <!-- 搜索表单 -->
    <el-form label-width="" size="small">
      <el-form-item label="角色名称" style="margin-bottom: 0">
        <el-row type="flex" align="middle" gutter="10">
          <el-col :span="12">
            <el-input
              v-model="querDto.roleName"
              placeholder="角色名称"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="small" @click="searchSysRole">
              搜索
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button size="small"> 重置 </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <!-- 添加按钮 -->
    <div class="tools-div">
      <el-button type="success" size="small" @click="addShow">添 加</el-button>
    </div>
  </div>
  <!-- 添加角色表单对话框 -->
  <el-dialog v-model="dialogVisible" title="添加或修改角色" width="30%">
    <el-form label-width="120px">
      <el-form-item label="角色名称">
        <el-input v-model="sysRole.roleName" />
      </el-form-item>
      <el-form-item label="角色Code">
        <el-input v-model="sysRole.roleCode" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!--  角色表格数据-->
  <!--- 角色表格数据 -->
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="roleName" label="角色名称" width="180" />
    <el-table-column prop="roleCode" label="角色code" width="180" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" align="center" width="280" #default="scope">
      <el-button type="primary" size="small" @click="editShow(scope.row)">
        修改
      </el-button>
      <el-button type="danger" size="small" @click="deleteShow(scope.row)">
        删除
      </el-button>
    </el-table-column>
  </el-table>

  <!--分页条-->
  <el-pagination
    v-model:current-page="pageParamsForm.page"
    v-model:page-size="pageParams.limit"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    @size-change="fetchData"
    @current-change="fetchData"
    :total="total"
  />
</template>
<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
